<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
import {message} from "ant-design-vue";
import server from "../../config/server.js";

const initLoading = ref(false);
const loading = ref(false);
const list = ref([]);
const currentIndex = ref(-1) // current music index
const music = ref(null)
const playMode = ref("list") // list single random

onMounted(() => {
  loadMusicData()
  music.value = document.getElementById("music")

  // the music play ended
  music.value.onended = () => {
    message.success("music is ended")
    switch (playMode.value) {
      case "list":
        onNextClick()
        break
      case "random":
        onRandomClick()
        break
      case "single":
        playMusic(currentIndex.value)
        break
      default:
        onNextClick()
    }
  }
});

// load the server music data
const loadMusicData = () => {
  initLoading.value = true
  axios({
    method: "get",
    url: `${server.apiBaseUrl}/zdppy_amfile?suffix=.mp3`
  }).then(resp => {
    console.log("resp.data", resp.data)
    if (resp.data && resp.data.data && resp.data.data.results) {
      list.value = resp.data.data.results
    }
  }).finally(() => {
    initLoading.value = false
  })
}

const onLoadMore = () => {
  loading.value = true;
  const newValue = [
    {id: "4", name: "test4.mp3", url: `${server.apiBaseUrl}/download/test2.mp3`},
    {id: "5", name: "test5.mp3", url: `${server.apiBaseUrl}/download/test2.mp3`},
    {id: "6", name: "test6.mp3", url: `${server.apiBaseUrl}/download/test2.mp3`},
  ]
  list.value = list.value.concat(newValue);
  loading.value = false
};

const onPlayClick = (index, item) => {
  console.log("play=", index, item)
  const mp3Url = `${server.apiBaseUrl}/download/${item.uuid}_${item.name}`
  const music = document.getElementById("music")
  music.pause()
  music.src = mp3Url
  music.currentTime = 0
  music.play()

  // record current music index
  currentIndex.value = index
}

// play the special index music
const playMusic = (index) => {
  // music
  let item = list.value[index]

  // play music
  const music = document.getElementById("music")
  music.pause()
  music.src = `${server.apiBaseUrl}/download/${item.uuid}_${item.name}`
  console.log("next music = ", `${server.apiBaseUrl}/download/${item.uuid}_${item.name}`)
  music.currentTime = 0
  music.play()

  // update current music index
  currentIndex.value = index
}

// play the prev index music
const onPrevClick = () => {
  let index = currentIndex.value - 1
  if (index < 0) {
    index = list.value.length - 1
  }
  playMusic(index)
}


// play the next index music
const onNextClick = () => {
  let index = currentIndex.value + 1
  if (index >= list.value.length) {
    index = 0
  }
  playMusic(index)
}

// play the random index music
const onRandomClick = () => {
  let index = Math.floor(Math.random() * list.value.length)
  playMusic(index)
  playMode.value = "random"
}

// loop play the current music
const onSingleClick = () => {
  if (currentIndex.value === -1 && list.value.length > 0) {
    currentIndex.value = 0
    playMusic(currentIndex.value)
  }
  playMode.value = "single"
}

// loop play the list music
const onListClick = () => {
  if (currentIndex.value === -1 && list.value.length > 0) {
    currentIndex.value = 0
    playMusic(currentIndex.value)
  }
  playMode.value = "list"
}

// delete the music
const onDeleteConfirm = (index, item) => {
  axios.delete(`${server.apiBaseUrl}/zdppy_amfile/` + item.id).then(resp => {
    console.log("delete response = ", resp)
    loadMusicData()
    message.success("delete the music " + item.id)
  })
}
</script>

<template>
  <a-list
      :loading="initLoading"
      item-layout="horizontal"
      :data-source="list"
  >
    <template #renderItem="{ item, index }">
      <a-list-item>
        <template #actions>
          <a key="list-loadmore-edit" @click="onPlayClick(index,item)">播放</a>
          <a key="list-loadmore-more">详情</a>
          <a-popconfirm
              title="您确定要删除这首音乐吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onDeleteConfirm(index, item)"
          >
            <a href="#">删除</a>
          </a-popconfirm>
        </template>
        <a-skeleton avatar :title="false" :loading="!!item.loading" active>
          <a-list-item-meta
              :description="item.name"
          >
          </a-list-item-meta>
        </a-skeleton>
      </a-list-item>
    </template>

    <div class="p-8 flex justify-center items-center space-x-3">
      <audio controls id="music"/>
      <a-button @click="onPrevClick">上一首</a-button>
      <a-button @click="onNextClick">下一首</a-button>
      <a-button @click="onRandomClick">随机播放</a-button>
      <a-button @click="onSingleClick">单曲循环</a-button>
      <a-button @click="onListClick">列表循环</a-button>
      <a-button>加载更多</a-button>
    </div>
  </a-list>


</template>
